<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品页</title>
    <link rel="stylesheet" type="text/css"
          href="bootstrap/bootstrap.4.1.0.css">
    <script src="./bootstrap/jquery.3.2.1.min.js"></script>
    <script src="./bootstrap/popper.12.5.min.js"></script>
    <script src="./bootstrap/bootstrap.4.1.0.min.js"></script>
    <script src="./layui/layer/layer.js"></script>
    <script src="./vue/Vue.js"></script>
    <script src="./vue/axios.js"></script>
    <style type="text/css">
        .active {
            background-color: lightskyblue;
        }
    </style>
</head>

<body>
    <div>
        <h1>方圆汽配</h1>
    </div>
    <div id="app">
        <button @click="exportPro" class="btn-warning">导出产品数据</button>
        <button @click="addPro" class="btn-primary">新增产品</button>
        <button @click="viewOprHistory" class="btn-dark">查看进货/销售记录</button>
        <button @click="oprType" class="btn-primary">种类管理</button>
        <br><br>
        <input type="text" :value="condition" placeholder="根据车型、图号、名称搜索" v-model="condition" style="height: 30px;width:200px">
        <select  v-model="selectType" style="height: 30px;width:130px">
            <option value="0" selected>种类不限</option>
            <option v-for="type in types" :value="type.id">{{type.name}}</option>
        </select>

        <button @click="search" class="btn-success">搜索</button><br><br>
        <div v-if="products!=null">
            <table class="table table-striped table-hover text-center">
                <thead>
                <tr>
                    <th>库存</th>
                    <th>车型</th>
                    <th>图号</th>
                    <th>种类</th>
                    <th>名称</th>
                    <th>产地</th>
                    <th>单价</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(product,index) in products" :key="index">
                    <td>{{product.stock}}</td>
                    <td>{{product.carType}}</td>
                    <td>{{product.mapNum}}</td>
                    <td>{{product.typeName}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.factory}}</td>
                    <td>{{product.price}}</td>
                    <td>{{product.mark}}</td>
                    <td class="btn-group">
                        <input type="button" @click="updatePro(product.id)" value="编辑" class="btn-success"/>
                        <input type="button" @click="delPro(product.id)" value="更改库存" class="btn-danger" />
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="row">
                <div class="offset-md-5">
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#"> 总数: {{total}}</a></li>
                        <li class="page-item"><a class="page-link" href="#"
                                                 @click.prevent="prePage"> <</a></li>
                        <li class="page-item" v-for="(item, index) in pageNum"><a
                                class="page-link" href="#" v-on:click.prevent="changePage(item)"
                                :class="{active: currentPage==index+1}">{{ index+1 }}</a></li>
                        <li class="page-item"><a class="page-link" href="#"
                                                 v-on:click.prevent="nextPage">></a></li>
                        <li class="page-item"><input type="text" v-model = "pageSize" class="page-link" style="width: 60px"></li>
                        <li class="page-item"><input type="button" @click="search" class="page-link" value="确定"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#app",
            data:{
                products:null,
                pageNum:0,
                currentPage:1,
                condition:"",
                pageSize: 10,
                total:0,
                types:[],
                selectType:0
            },
            mounted(){
                this.getProducts(1)
                this.getTypes()
            },
            methods:{
                getTypes:function(){
                    axios.post(
                        "/product/type/list"
                    ).then(
                        res => {
                            if(res.data.code===200){
                                this.types = res.data.returnData;
                            }else if(res.data.code===500){
                                layer.msg(res.data.message);
                            }
                        }

                    ).catch(response => {
                        layer.alert("服务器忙，请稍后再试")
                        console.log(response)
                    })
                },
                oprType: function() {
                    location.href = "oprType.html"
                },
                viewOprHistory: function() {
                    location.href = "oprHistory.html"
                },
                updatePro: function(id) {
                    layer.open({
                        type: 2,
                        title: false,
                        fixed: false,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['40%', '70%'], //宽高
                        content: 'updatePro.html?id=' + id
                    })
                },
                delPro: function(id) {
                    layer.open({
                        type: 2,
                        title: false,
                        fixed: false,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['40%', '70%'], //宽高
                        content: 'updateStock.html?id=' + id
                    })
                },
                changePage:function(page) {
                    this.currentPage = page;
                    this.getProducts(page);
                },
                addPro: function() {
                    layer.open({
                        type: 2,
                        title: false,
                        fixed: false,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['40%', '70%'], //宽高
                        content: 'addPro.html'
                    })
                },
                search: function() {
                    this.currentPage = 1;
                    this.getProducts(1)
                },
                getProducts:function(page){
                    let data = {
                        "pageIndex": page,
                        "pageSize":this.pageSize,
                        "condition":this.condition,
                        "typeId": this.selectType
                    }
                    axios.post(
                         "/product/query",
                         data
                    ).then(
                        res => {
                            if(res.data.code===200){
                                this.products = res.data.returnData;
                                this.total = res.data.total;
                                this.pageNum = this.getPageNum(this.pageSize, this.total);
                            }else if(res.data.code===500){
                                layer.alert(res.data.message);
                            }
                        }

                    ).catch(response => {
                        layer.alert("服务器忙，请稍后再试")
                        console.log(response)
                    })
                },
                getPageNum: function(pageSize, total) {
                    if (total <= 0){
                        return 0;
                    }
                    if (pageSize >= total) {
                        return 1;
                    }
                    let totalPage = parseInt(total / pageSize);
                    return total % pageSize === 0 ? totalPage : totalPage + 1;
                },
                prePage:function(){
                    if (this.currentPage > 1) {
                        this.currentPage  = this.currentPage - 1;
                        this.getProducts(this.currentPage);
                    }
                },
                nextPage:function(){
                    if (this.currentPage < this.pageNum) {
                        this.currentPage  = this.currentPage + 1;
                        this.getProducts(this.currentPage);
                    }
                },
                exportPro: function () {
                    axios({
                        method: 'GET',
                        url: "/product/export",
                        responseType: 'blob' // 更改responseType类型为 blob
                    }).then(response => {
                        /* 兼容ie内核，360浏览器的兼容模式 */
                        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                            let blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
                            window.navigator.msSaveOrOpenBlob(blob, '产品数据.xls')
                        } else {
                            /* 火狐谷歌的文件下载方式 */
                            var blob = new Blob([response.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'})
                            var downloadElement = document.createElement('a')
                            var href = window.URL.createObjectURL(blob)
                            downloadElement.href = href
                            downloadElement.download = '产品数据.xls'
                            document.body.appendChild(downloadElement)
                            downloadElement.click()
                            document.body.removeChild(downloadElement)
                            window.URL.revokeObjectURL(href)
                        }
                    })
                        .catch(response => {
                            console.log(response)
                        })
                }
            }
        });
    </script>
</body>
</html>